<template>
  <div>
    <el-row :gutter="40">
      <el-col :span="7">
        <tree @node_click="nodeClick"></tree>
      </el-col>
      <el-col :span="16">
        <div>
          <el-input
            v-model="input"
            placeholder="请输入查询参数"
            class="searchInput"
          ></el-input>
          <el-select
            v-model="selectValue"
            clearable
            placeholder="请选择属性类型"
          >
            <el-option
              label="销售属性"
              value="0"
            >
            </el-option>
            <el-option
              label="基本属性"
              value="1"
            >
            </el-option>
            <el-option
              label="基本&销售"
              value="2"
            >
            </el-option>
          </el-select>
          <el-button
            icon="el-icon-search"
            style="font-size: 16px;"
            @click="handleSearch"
          ></el-button>
          <el-button
            class="addButton"
            @click="handleEdit"
            icon="el-icon-circle-plus"
          ></el-button>
          <el-button
            class="delButton"
            v-if="multipleSelectionFlag"
            @click="batchRemoveBrand"
            icon="el-icon-delete"
          >
          </el-button>
          <el-table
            ref="baseattr"
            :data="baseattr"
            :stripe="true"
            :highlight-current-row="true"
            @selection-change="baseattrSelectionChange"
            tooltip-effect="dark"
            class="table"
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="属性id"
              width="80"
              align="center"
            >
              <template slot-scope="scope">{{ scope.row.attrId }}</template>
            </el-table-column>
            <el-table-column
              prop="attrName"
              label="属性名"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="searchType"
              label="是否检索"
              width="100"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <i
                  class="el-icon-success"
                  v-if="scope.row.searchType==1"
                ></i>
                <i
                  class="el-icon-error"
                  v-else
                ></i>
              </template>
            </el-table-column>
            <el-table-column
              prop="valueSelect"
              label="可选值"
              width="150"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="attrType"
              label="属性类型"
              width="100"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.attrType==0">销售属性</el-tag>
                <el-tag
                  type="success"
                  v-if="scope.row.attrType==1"
                >基本属性</el-tag>
                <el-tag
                  type="info"
                  v-if="scope.row.attrType==2"
                >销售&基本</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="enable"
              label="启用状态"
              width="100"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  type="info"
                  v-if="scope.row.enable==0"
                >禁用</el-tag>
                <el-tag
                  type="success"
                  v-if="scope.row.enable==1"
                >启用</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="catelogNames"
              label="所属分类"
              width="150"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="showDesc"
              label="快速展示"
              width="80"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <i
                  class="el-icon-success"
                  v-if="scope.row.showDesc==1"
                ></i>
                <i
                  class="el-icon-error"
                  v-else
                ></i>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                ><i class="el-icon-edit"></i></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                ><i class="el-icon-delete"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 弹窗, 新增 / 修改 -->
          <add-or-update
            v-if="addOrUpdateShow"
            ref="addOrUpdate"
            @refreshDataList="getDataList"
          ></add-or-update>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 40, 80]"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import tree from '@/components/tree/index.vue'
import AddOrUpdate from './baseattrDialog.vue'
export default {
  data () {
    return {
      input: '', // 搜索框数据
      multipleSelection: [], // 保存勾选数据
      multipleSelectionFlag: false,
      baseattr: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      catId: 0,
      addOrUpdateShow: false,
      selectValue: ''
    }
  },
  methods: {
    // 树形菜单点击事件，接受子组件的传值
    nodeClick (data, node, component) {
      if (node.level === 3) {
        this.catId = data.catId
        this.getBaseattrPageList(this.pageSize, this.currentPage)
      }
    },
    handleSearch () {
      if (this.input === '') {
        this.catId = 0
      }
      this.getBaseattrPageList(this.pageSize, this.currentPage, this.input, this.selectValue)
    },
    // 添加、修改
    handleEdit (index, row) {
      this.addOrUpdateShow = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(index, row)
      })
    },
    getDataList () {
      this.getBaseattrPageList(this.pageSize, this.currentPage)
    },
    handleDelete (index, row) {
      let ids = [row.attrId]
      let name = row.attrName
      this.remove(ids, name)
    },
    batchRemoveBrand () {
      let ids = []
      let name = []
      this.multipleSelection.forEach(item => {
        ids.push(item.attrId)
        name.push(item.attrName)
      })
      this.remove(ids, name)
    },
    baseattrSelectionChange () { },
    remove (ids, name) {
      this.$confirm(`删除【${name}】属性, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/attr/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then((data) => {
          if (data.data.code === 500) {
            this.$message({
              type: 'error',
              message: data.data.data
            })
          } else {
            this.$message({
              type: 'success',
              message: data.data.data
            })
          }

          this.getBaseattrPageList(this.pageSize, this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    handleSizeChange (size) {
      this.pageSize = size
      this.getBaseattrPageList(this.pageSize, this.currentPage, this.input)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getBaseattrPageList(this.pageSize, this.currentPage, this.input)
    },
    getBaseattrPageList (size, page, input, selectValue) {
      this.$http({
        url: this.$http.adornUrl(`/product/attr/list/${this.catId}`),
        method: 'get',
        params: this.$http.adornParams({
          page: size,
          limit: page,
          input: input,
          selectValue: selectValue
        })
      }).then(({
        data
      }) => {
        this.total = data.data.total
        this.baseattr = data.data.records
      })
    }
  },
  created () {
    this.getBaseattrPageList(this.pageSize, this.currentPage)
  },
  components: {
    tree,
    AddOrUpdate
  }
}
</script>
<style>
.searchInput {
  width: 35%;
  margin-right: 10px;
}

.addButton {
  background: #25c6a2;
  color: #fff;
  font-size: 16px;
}

.delButton {
  background: #f4b1b6;
  color: #fff;
  font-size: 16px;
}

.table {
  width: 100%;
  margin-top: 15px;
}
</style>